import React from 'react';
import PropTypes from 'prop-types';
import { CSSTransition } from 'react-transition-group';
import { Lead } from '@alife/devops-ui';
import { getIntroPointState } from 'api';
import './index.scss';

const prefix = 'robot-pop';

export default class RobotPop extends React.Component {
  static propTypes = {
    header: PropTypes.string,
    description: PropTypes.element,
    arrowType: PropTypes.string,
    close: PropTypes.bool,
    shown: PropTypes.func,
    introPointKey: PropTypes.string,
  };

  static defaultProps = {
    header: null,
    description: null,
    arrowType: 'bottom',
    close: null,
    shown: () => {},
    introPointKey: '',
    yunDouHide: null,
  };

  state = {
    visible: false,
  };

  componentDidMount() {
    const { introPointKey, introPointType, shown } = this.props;
    if (introPointKey) {
      getIntroPointState(introPointKey, introPointType)
        .then((result) => {
          if (result.state) {
            this.setState({
              visible: true,
            });
            shown(false);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }

  UNSAFE_componentWillReceiveProps({ close }) {
    if (close !== null) {
      this.setState({
        visible: !close,
      });
    }
  }

  render() {
    const {
      header,
      description,
      arrowType,
      componentType,
      onClose,
      onOk,
      okText,
      closeText,
      title,
      content,
    } = this.props;
    const { visible } = this.state;

    if (componentType === 'Lead') {
      return (
        <Lead.NotifyCard
          visible={visible}
          title={title}
          btns={[
            { type: 'normal', text: closeText, onClick: onClose },
            { type: 'primary', text: okText, onClick: onOk },
          ]}
          onClose={onClose}
          type="lite"
        >
          {content}
        </Lead.NotifyCard>
      );
    }

    return (
      <CSSTransition in={visible} timeout={500} classNames="robot" unmountOnExit>
        <div style={{ position: 'absolute', top: 100, left: 100 }}>
          <div className={`${prefix}-arrow ${arrowType}`} />
          <div className={`${prefix}`}>
            <div className={`${prefix}-header`}>{header}</div>
            <div className={`${prefix}-description`}>{description}</div>
          </div>
        </div>
      </CSSTransition>
    );
  }
}
